<template>
  <div>
    <!-- 资质证书上传 -->
    <div class="topName">
      <div style="display: flex; align-items: center">
        <img
          style="width: 20px; height: 18px; margin: 0 10px"
          src="../../../assets/img/3.png"
          alt=""
          :isCollapse="true"
        />
        <el-button type="primary">资质证书上传</el-button>
      </div>
    </div>

    <div class="title">
      <div class="top">
        <!-- 说明 -->
        <div class="top_title"></div>
        <!-- 表单 -->
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="是否在商场中显示">
            <el-radio-group v-model="ruleForm.resource">
              <el-radio label="显示" />
              <el-radio label="不显示" />
            </el-radio-group>
          </el-form-item>

          <el-form-item label="证书名称" prop="name">
            <el-input style="width: 250px" v-model="ruleForm.name" />
          </el-form-item>

          <el-form-item label="发证机构" prop="name">
            <el-input style="width: 250px" v-model="ruleForm.name" />
          </el-form-item>

          <el-form-item label="证书编号" prop="name">
            <el-input style="width: 250px" v-model="ruleForm.name" />
          </el-form-item>

          <el-form-item label="生效日期" prop="name">
            <el-input style="width: 150px" v-model="ruleForm.name" />
          </el-form-item>

          <el-form-item label="截至日期" prop="name">
            <el-input style="width: 150px" v-model="ruleForm.name" />
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="终身有效" name="type" />
            </el-checkbox-group>
          </el-form-item>

          <!-- 上传图片 -->
          <el-form-item label="上传证书图片">
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <img src="../../../assets/img/35.png" alt="" />
              <template #file="{ file }">
                <div>
                  <img
                    class="el-upload-list__item-thumbnail"
                    :src="file.url"
                    alt=""
                  />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <el-icon><zoom-in /></el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <el-icon>
                        <Download />
                      </el-icon>
                    </span>
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <el-icon>
                        <Delete />
                      </el-icon>
                    </span>
                  </span>
                </div>
              </template>
            </el-upload>
          </el-form-item>

          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>

          <el-form-item class="footer">
            <div class="son">
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                确定
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Delete, Download, Plus, ZoomIn } from "@element-plus/icons-vue";
import type { UploadFile } from "element-plus";
import top from "../../../components/top/top.vue";

const formSize = ref("default");
const ruleFormRef = ref();
const ruleForm = reactive({
  name: "Hello",
  type: [],
  resource: false,
});

// 验证
const rules = reactive({
  name: [
    { required: true, message: "Please input Activity name", trigger: "blur" },
    { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});

// 确定
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 取消
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

// 上传图片

const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file: UploadFile) => {
  console.log(file);
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
  console.log(file);
};
</script>

<style>
/* 上传图片样式 */
.el-upload--picture-card {
  --el-upload-picture-card-size: 100px !important;
}

.el-form-item__label {
  font-size: 13px !important;
}
</style>

<style lang="scss" scoped>
.title {
  // width: 1610px;
  // height: calc(100vh - 80px - 60px - 20px - 5px);
  background-color: #fff;
  // overflow: hidden;
  margin: 0 0 10px 10px;

  .top {
    padding: 12px 0 0 0;

    .top_title {
      height: 150px;
      background-color: #ffebeb;
      font-size: 14px;
    }
  }
}

// 提交
.footer {
  // width: 1610px;
  height: 80px;
  background: #ffffff;
  box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
  margin-top: 170px;

  .son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-100%, -50%);
  }
}
</style>
